<template>
    <!-- <div class="main">
        <el-row>
            <el-form ref="elForm" :model="searchForm" size="medium" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="插座编号" prop="devid">
                            <el-input v-model="searchForm.devid" placeholder="请输入插座编号" show-word-limit clearable
                                :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="在线状态" prop="onlineStatus">
                            <el-select v-model="searchForm.onlineStatus" placeholder="请选择设备在线情况" clearable
                                :style="{ width: '100%' }">
                                <el-option label="在线" value="1"></el-option>
                                <el-option label="离线" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="网络状态" prop="networkType">
                            <el-select v-model="searchForm.networkType" placeholder="请选择设备网络状态" clearable
                                :style="{ width: '100%' }">
                                <el-option label="TCP专线" value="1"></el-option>
                                <el-option label="网关专线" value="2"></el-option>
                                <el-option label="广域网专线" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item size="large">
                            <el-button type="primary" @click="submitSearchForm">查询</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
        <el-row>
            <el-table :data="devList" stripe style="width: 100%" row-key="tableId" lazy :load="loadDevLine"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column fixed prop="deviceId" label="插座编号" width="150">
                </el-table-column>
                <el-table-column prop="onlineStatus" label="在线状态" width="120">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.onlineStatus == 1">在线</el-tag>
                        <el-tag type="info" v-else-if="scope.row.onlineStatus == 0">离线</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="errorStatus" label="异常状态（无）" width="120">
                </el-table-column>
                <el-table-column prop="devType" label="类型" width="120">
                    <template slot-scope="scope">
                        <span style="color: #00a400;"
                            v-if="scope.row.lineNum > 0">多路</span>
                        <span style="color: #888;" v-else-if="!scope.row.optBut">单路</span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column prop="relayStatus" label="继电器" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.relayStatus == 1">开</span>
                        <span v-else-if="scope.row.relayStatus == 0">关</span>
                    </template>
                </el-table-column>
                <el-table-column prop="networkType" label="网络状态" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.networkType == 1">TCP专线</span>
                        <span v-else-if="scope.row.networkType == 2">网关专线</span>
                        <span v-else-if="scope.row.networkType == 3">广域网专线</span>
                    </template>
                </el-table-column>
                <el-table-column prop="voltage" label="电压" width="120">
                </el-table-column>
                <el-table-column prop="electricCurrent" label="电流" width="120">
                </el-table-column>
                <el-table-column prop="activePower" label="频率" width="120">
                </el-table-column>
                <el-table-column prop="energy" label="当前用电量" width="120">
                </el-table-column>
                <el-table-column prop="totalEnergyLast" label="上次累计用电量" width="120">
                </el-table-column>
                <el-table-column prop="totalEnergy" label="累计用电量" width="120">
                </el-table-column>
                <el-table-column prop="powerFactor" label="功率因素" width="120">
                </el-table-column>
                <el-table-column prop="activePower" label="平均功率" width="120">
                </el-table-column>
                <el-table-column prop="temperature" label="温度" width="120">
                </el-table-column>
                <el-table-column prop="modifyTime" label="更新时间" width="120">
                </el-table-column>
                <el-table-column prop="devName" label="用电设备名称" width="120">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="250">
                    <template slot-scope="scope" v-if="scope.row.optBut ? false : true">
                        <el-button size="mini" @click="sendCharCommand(scope.row)">发送指令</el-button>
                        <el-button size="mini" @click="loadDevMonitorParams(scope.row)">参数配置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getDevList" />
        </el-row>
        <el-dialog title="字节命令" width="30%" :visible.sync="showByteCommandDialog">
            <el-form label-width="100px">
                <el-form-item label="设备编号">
                    <el-input type="text" v-model="cmd.deviceId" disabled></el-input>
                </el-form-item>
                <el-form-item label="发送指令">
                    <el-select v-model="cmd.commandIdAndType">
                        <el-option v-for="item in devCommandList" :key="item.id" :value="item.id + ',' + item.type"
                            :label="item.name" placeholder="请选择"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="线路选择" v-if="lineList.length > 0">
                    <el-select multiple v-model="cmd.lineIdList">
                        <el-option v-for="group in lineList" :key="group.id" :label="group.deviceId" :value="group.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="showByteCommandDialog = false">取消</el-button>
                <el-button @click="sendDevMeterCommand()">发送</el-button>
            </div>
        </el-dialog>
        <el-dialog title="监控参数配置" width="30%" :visible.sync="devMonitorParamDialog">
            <el-form label-width="100px">
                <el-form-item label="设备编号">
                    <el-input type="text" v-model="param.deviceId" disabled></el-input>
                </el-form-item>
                <el-form-item label="参数类型">
                    <el-select @change="addInput" multiple v-model="param.paramIdList">
                        <el-option-group v-for="group in devParamList" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item v-for="item in inputList" :key="item.name" :label="item.name">
                    <el-input type="text" v-model="item.threshold"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="devMonitorParamDialog = false">取消</el-button>
                <el-button @click="setDevMonitorParams()">发送</el-button>
            </div>
        </el-dialog>
    </div> -->
</template>
<script>
import { getDevList, getDevCommands, sendDevMeterCommand, getDevMonitorParams, setDevMonitorParams, findChildrenByMac } from "@/api/alm/dev-base-info/dev-base-info-manage/dev-base-info-manage";
import { getType } from "@/api/devTypeMap";

export default {
    data() {
        return {
            showByteCommandDialog: false,
            devList: [],
            cmd: {
                deviceId: '',
                commandIdAndType: ''
            },
            param: {
                deviceId: '',
                paramIdList: [],
                userInputValueList: []
            },
            devCommandList: [],
            devParamMap: {},
            devParamList: [],
            devMonitorParamDialog: false,
            inputList: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                ipaddr: undefined,
                userName: undefined,
                status: undefined
            },
            dateRange: [],
            lineList: [],
            searchForm: {},
            tableId: 1,
        }
    },
    created() {
        this.getDevList(this.addDateRange(this.queryParams, this.dateRange))
    },
    deactivated() {
    },
    mounted() {
    },
    methods: {
        getDevList(obj) {
            let _this = this;
            getDevList(obj).then(response => {
                this.devList = response.rows;
                this.total = response.total;
                this.devList.forEach(item => {
                    item.tableId = _this.tableId++;
                    item.energy = (item.energy + item.totalEnergy).toFixed(3);
                    item.devType = item.sysDevInfo ? getType(item.sysDevInfo.devType) : '';
                    item.devName = item.sysDevInfo ? item.sysDevInfo.devName : '';
                    item.modifyTime = this.dateFormat(item.modifyTime / 1000);
                    item.hasChildren = item.lineNum > 0 ? true : false;
                })
            });
        },

        getDevCommands(obj) {
            getDevCommands(obj).then(response => {
                this.devCommandList = response.data;
                this.showByteCommandDialog = true;
                console.log('this.devCommandList ', response.data);
            });
        },

        handleClick(row) {
            console.log(row);
        },

        getType(type) {
            return getType(type);
        },

        sendDevMeterCommand() {
            let arr = this.cmd.commandIdAndType.split(',');
            console.log('this.cmd ', this.cmd);
            let obj = {
                deviceId: this.cmd.deviceId,
                cmdId: Number(arr[0]),
                cmdType: arr[1] === 'null' ? '' : arr[1],
                lineIdList: this.cmd.lineIdList
            }
            sendDevMeterCommand(obj).then(response => {
                console.log('sendDevMeterCommand ', response);
            })
        },

        sendCharCommand(row) {
            this.cmd = {}
            console.log('row ', row);
            this.cmd.deviceId = row.deviceId;

            this.findChildrenByMac(row)
            // this.lineList = []
            // if (row.children && row.children.length > 0) {
            //     this.lineList = row.children;
            // }
            this.getDevCommands(this.cmd)
        },

        loadDevMonitorParams(row) {
            this.param = {};
            this.param.deviceId = row.deviceId
            this.devMonitorParamDialog = true;

            getDevMonitorParams(row.deviceId).then(response => {
                this.devParamMap = response.data;
                this.devParamList = []

                for (let key in this.devParamMap) {
                    if (this.devParamMap.hasOwnProperty(key)) {
                        let arr = this.devParamMap[key]

                        let paramObj = {
                            label: key,
                            options: []
                        }
                        arr.forEach(item => {
                            paramObj.options.push({
                                value: item.id,
                                label: item.name
                            })
                        });
                        this.devParamList.push(paramObj)
                    }
                }
                console.log('this.devParamList ', this.devParamList);
                console.log('getDevMonitorParams ', response.data);
            })
        },

        setDevMonitorParams() {
            // this.param.userInputValueList = []
            // this.inputList.forEach(item => {
            //     this.param.userInputValueList.push({
            //         threshold: item.userInput
            //     })
            // })
            this.param.userInputValueList = this.inputList
            console.log('this.inputList ', this.inputList);
            console.log('this.param ', this.param);
            setDevMonitorParams(this.param).then(response => {
                console.log(response);
            })
        },

        addInput() {
            this.inputList = []
            for (let key in this.devParamMap) {
                if (this.devParamMap.hasOwnProperty(key)) {
                    let objArr = this.devParamMap[key]
                    objArr.forEach(item => {
                        this.param.paramIdList.forEach(item2 => {
                            if (item.id === item2) {
                                this.inputList.push(item)
                            }
                        })
                    })
                }
            }
        },

        opendg(row) {

        },

        opentx(row) {

        },

        submitSearchForm() {
            this.getDevList(this.searchForm)
        },

        resetForm() {
            this.$refs['elForm'].resetFields()
            this.searchForm = {}
            this.getDevList({})
        },

        dateFormat(timeStamp) {
            // 创建一个新的Date对象，将时间戳作为参数传递给构造函数
            const date = new Date(timeStamp * 1000)
            // 获取年、月、日、小时和分钟
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            const seconds = String(date.getSeconds()).padStart(2, '0')
            // 重新赋值格式化后的日期字符串
            return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
        },

        loadDevLine(tree, treeNode, resolve) {
            let _this = this;
            setTimeout(() => {
                findChildrenByMac(tree.deviceId).then(response => {
                    _this.lineList = response.rows ? response.rows : []
                    _this.lineList.forEach(item => {
                        item.optBut = true;
                        item.deviceId = '第' + item.lineNo + '路'
                        item.tableId = _this.tableId++;
                    })
                    resolve(_this.lineList)
                })
            }, 1000)
        },

        findChildrenByMac(obj) {
            let _this = this;
            findChildrenByMac(obj.deviceId).then(response => {
                _this.lineList = response.rows ? response.rows : []
                _this.lineList.forEach(item => {
                    item.optBut = true;
                    item.deviceId = '第' + item.lineNo + '路'
                    item.tableId = _this.tableId++;
                })
            })
        }
    }
};
</script>

<style scoped>
.main {
    width: 100%;
}
</style>